<template>
  <div>
    <a-tabs default-active-key="1" @change="callback" size="large">
      <a-tab-pane key="1" tab="学习中">
        <div style="overflow: hidden">
          <div
            class="listDiv"
            v-for="(item, index) in myClassList"
            :key="index"
          >
            <div class="dlex2-div" @click="getJumpVideo(item)">
              <div class="image1">
                <img
                  class=""
                  :src="imageWebUrl + item.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div>
                <span
                  class="titleTxt1"
                  style="font-weight: 600; margin-top: 6px"
                >
                  {{ item.name }}
                </span>
                <div class="dlex2-div">
                  <span class="redTxt" v-if="item.freeFlag == 'N'">
                    <p class="redTxt" style="font-size: 12px">￥</p>
                    {{ item.cost }}
                  </span>
                  <span class="redTxt" v-if="item.freeFlag == 'Y'">免费</span>
                  <span class="redTxt" v-if="item.freeFlag == 'X'"
                    >限时免费</span
                  >
                  <p>
                    <span class="smallPrint" v-show="item.learnedTime"
                      >已学到{{ item.learnedTime }}%</span
                    >
                    <span class="smallPrint">{{ item.createDate }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; margin-top: 30px"
            v-if="myClassList.length == 0 && flag"
          />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已完成" force-render>
        <div style="overflow: hidden">
          <div
            class="listDiv"
            v-for="(item, index) in myClassList"
            :key="index"
          >
            <div class="dlex2-div" @click="getJumpVideo(item)">
              <div class="image1">
                <img
                  class=""
                  :src="imageWebUrl + item.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div>
                <span
                  class="titleTxt1"
                  style="font-weight: 600; margin-top: 6px"
                >
                  {{ item.name }}
                </span>

                <p style="margin-top: 10px; color: #ffbe37" class="titleTxt5">
                  本门课程已学完
                </p>
                <div class="dlex2-div">
                  <span class="redTxt" v-if="item.freeFlag == 'N'">
                    <p class="redTxt" style="font-size: 12px">￥</p>
                    {{ item.cost }}
                  </span>
                  <span class="redTxt" v-if="item.freeFlag == 'Y'">免费</span>
                  <span class="redTxt" v-if="item.freeFlag == 'X'" >限时免费</span>
                  <span class="smallPrint">已学到100%</span>
                  <span class="smallPrint">{{ item.createDate }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; margin-top: 30px"
            v-if="myClassList.length == 0 && flag"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>



<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      titleList: [
        { name: "全部" },
        { name: "学历教育" },
        { name: "特殊教育" },
        { name: "职业技能教育" },
        { name: "艺术教育" },
        { name: "综合教育" },
      ],
      current: 1,
      type: "1",
      total: 0,
      pageSize: 4,
      pageIndex: 1,
      myClassList: [],
      flag: false,
      onLoading: false,
    };
  },
  mounted() {
    this.getMyClass();
  },
  methods: {
    callback(key) {
      this.type = key;
      this.myClassList = [];
      this.getMyClass();
    },
    changePagin(e) {
      this.flag = false;
      this.pageIndex = e;
      this.getMyClass();
    },
    // 获取我的课程列表
    getMyClass() {
      this.onLoading = true;
      this.$ajax({
        url:
          "/user/usercollect/study/list?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {
          type: this.type,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.myClassList = res.data.list;
          this.total = res.data.totalCount;
        } else {
          this.onLoading = false;
        }
      });
    },
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&cataNo=" +
          e.cataNo +
          "&videoCode=" +
          e.videoCode +
          "&my=1"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.listDiv {
  // width: 806px;
  // height: 265px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  cursor: pointer;
  padding: 12px;
  padding-right: 24px;
  margin-left: 1px;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  transition: all ease 1s;
  .image1 {
    width: 152px;
    height: 105px;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dloDiv {
    width: 746px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: #eeeeee solid 1px;
  }
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  color: #333333;
  text-shadow: 0 0 0.25px currentColor;
  font-weight: 600;
}
.smallPrint {
  margin-left: 32px;
}
.redTxt{
  display: flex;
  align-items: baseline;
}
</style>
